<template>
  <fieldset>
    <legend>姓名操作</legend>
    姓氏:<input type="text" placeholder="输入姓氏" v-model="user.firstname"><br/>
    名字:<input type="text" placeholder="输入名字" v-model="user.lastname"><br/>
  </fieldset>
  <fieldset>
    姓名:<input type="text" placeholder="显示姓名" v-model="fullName1"><br/>
    姓名:<input type="text" placeholder="显示姓名" v-model="fullName2"><br/>
    姓名:<input type="text" placeholder="显示姓名" v-model="fullName3"><br/>
    <legend>计算属性和监视的演示</legend>
  </fieldset>
</template>
<script>
  import { computed, defineComponent, reactive, ref, watch, watchEffect} from 'vue';
  export default defineComponent({
    name:'JisuanShux',
    setup(){
      // 定义一个响应式的对象
      const user = reactive({
        firstname:'王',
        lastname:'嘉尔'
      })
      // 通过计算属性的方式,实现第一个姓名的显示
      // vue3的计算属性  计算属性中之传入一个回调函数,表示的是get  
      const fullName1=computed(()=>{  //返回的是一个ref的对象
        return user.firstname+' '+user.lastname
      })
      // 同时需要get和set操作时,传入的是一个对象
      const fullName2=computed({
        get(){
          return user.firstname+' '+user.lastname
        },
        set(val){
          const names=val.split(' ')
          user.firstname=names[0]
          user.lastname=names[1]
        }
      })
      const fullName3=ref('')
      // 监视---监视指定的数据
      watch(user,({firstname,lastname})=>{
        fullName3.value=firstname+' '+lastname
      },{immediate:true,deep:true})
      //immediate 默认会执行一次watch deep深度监视
      // watchEffect 也是监视  不需要配置immediate
      // watchEffect(()=>{
      //   fullName3.value=user.firstname+' '+user.lastname
      // })
      // 监视fullName3的数据,改变firstname和lastname
      watchEffect(()=>{
        const names1=fullName3.value.split(' ')
        user.firstname=names1[0]
        user.lastname=names1[1]
      })
      // watch 可以监听多个数据的
      // 这里的代码没有执行,因为fullName3是响应式数据,但user.firstname,user.lastname不是响应式数据,
      watch([user.firstname,user.lastname,fullName3],()=>{console.log(111);})
      // 这样就可以执行了
      watch([()=>user.firstname,()=>user.lastname,fullName3],()=>{console.log(111);})
      return{
        user,fullName1,fullName2,fullName3
      }
    }
  })
</script>
<style scoped>
</style>